<template>
	<view class="user-view">
		<input type="text" class="user-input" v-model="account" placeholder="请输入手机号" />
		<hr />
		<input type="password" class="user-input" v-model="password" placeholder="请输入密码" />
		<hr />		
		<button type="primary" class="btn-login" @tap="bindLogin">登录</button>
	</view>
</template>

<script>
	import service from '../../service.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import mInput from '../../components/m-input.vue';
	import ValidForm from '../../common/js/valid-form.js';
	/* import {Tida} from '//g.alicdn.com/tmapp/tida/3.3.26/tida.js?appkey=26013107'; */


	export default {
		components: {
			mInput
		},
		data() {
			return {
				providerList: [],
				hasProvider: false,
				account: '',
				password: '',
				positionTop: 0
			};
		},
		computed: mapState(['forcedLogin']),
		methods: {
			tbAuth() {

			},
			// 使用对象展开运算符将此对象混入到外部对象中
			...mapMutations(['login']),
			initProvider() {
				//  const filters = ['weixin', 'qq', 'sinaweibo'];
				const filters = ['weixin'];
				uni.getProvider({
					service: 'oauth',
					success: res => {
						if (res.provider && res.provider.length) {
							for (let i = 0; i < res.provider.length; i++) {
								if (~filters.indexOf(res.provider[i])) {
									this.providerList.push({
										value: res.provider[i],
										image: '../../static/img/' + res.provider[i] + '.png'
									});
								}
							}
							this.hasProvider = true;
						}
					},
					fail: err => {
						console.error('获取服务供应商失败：' + JSON.stringify(err));
					}
				});
			},
			initPosition() {
				/**
				 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
				 * 反向使用 top 进行定位，可以避免此问题。
				 */
				this.positionTop = uni.getSystemInfoSync().windowHeight - 100;
			},
			async bindLogin() {
				let valid = new ValidForm(this.account, this.password, '');
				console.log("valid.validPhoneNum(this.account)===" + valid.validPhoneNum(this.account))
				// if (valid.validPhoneNum(this.account) == true) {
					const data = {
						password: this.password,
						username: this.account
					};
					uni.request({
						url: this.$usereq + '/coupon-customer/app/login/login',
						method: 'POST',
						data: data,
						success: res => {
							let datas = res.data;
							if (datas.code == 200) {
								try {
									uni.setStorageSync('token', 'bearer '.concat(datas.data.accessToken));
									uni.setStorageSync('bump', datas.data.bump);
									uni.setStorageSync('relationId', datas.data.relationId);
									uni.setStorageSync('mobile', datas.data.customerId);
								} catch (e) {
									console.log('set storage token fail:' + e.message);
								}
								uni.showToast({
									title: '登录成功'
								});
								const param = {
									mobile: this.account,
									password: this.password
								};
								service.addUser(param);
								//mapState(['hasLogin']);
								//toMain(data.username);
								// uni.navigateTo({
								// 	url: '../main/main'
								// });
							} else {
								uni.showToast({
									icon: 'none',
									title: datas.msg,
									mask: false,
									duration: 1500
								});
							}
						}
					});
				// }
			},
			oauth(value) {
				uni.login({
					provider: value,
					success: res => {
						uni.getUserInfo({
							provider: value,
							success: infoRes => {
								/**
								 * 实际开发中，获取用户信息后，需要将信息上报至服务端。
								 * 服务端可以用 userInfo.openId 作为用户的唯一标识新增或绑定用户信息。
								 */
								this.toMain(infoRes.userInfo.nickName);
							}
						});
					},
					fail: err => {
						console.error('授权登录失败：' + JSON.stringify(err));
					}
				});
			},
			toMain(userName) {
				this.login(userName);
				/**
				 * 强制登录时使用reLaunch方式跳转过来
				 * 返回首页也使用reLaunch方式
				 */
				h5RedirectTo({
					url: '../main/main'
				});
				if (this.forcedLogin) {
					h5RedirectTo({
						url: '../main/main'
					});
				} else {
					h5NavigateBack();
				}
			}
		},
		onLoad() {
			this.initPosition();
			this.initProvider();
		}
	};
</script>

<style lang="scss" scoped>
	.user-view {
		font-size: 28px;
		width: 80%;
		height: 120px;
		color: black;
		margin-top: 60px;

		.user-input{
			margin-left: 20px;
			width: 100%;
			height: 50px;
		}
		.btn-login{
			margin-top: 30px;
			width: 300px;
		}
	}
</style>
